<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>结婚网</title>
		<style>
			* {/* 通配符选择器 */
			margin: 0;/* 贴左边 */
			}
			img{
				vertical-align: bottom;/* 垂直对齐底部 */
			}
			
			/* header区 */
			.header{
				
			}
			.ad1{
				padding: 15px 0px;
			}
			.ad2{
				
			}
			.fl{
				float: left;/* 左浮动 */
}
			.fr{
				float: right;/* 右浮动 */
			}
			.w{   /* 设置图片,既有宽度也居中 */
				width: 1080px;
				margin: 0 auto;
			}
			
			/* 以下是banner区 */
		
			.banner{
				/* 父盒先给高 */
				padding-top: 15px;
				height: 555px;	
			}
			.banner_ad{
				padding-top: 15px;
			}
			.banner_ad div:nth-child(2){
				padding: 0 15px;
			}
			
			/* 以下是main区 */
			.main{
				
			}
			.title{
				border-bottom: 2px solid fcf9f9;
				padding-top: 35px;
				height: 42px;
			}
			
			.title h3{
				font-family: "黑体";
				font-size: 24px;/* 文字的大小 */
				line-height: 42px;/* 行高 */
			}
			.brand{
				padding-top: 15px;
				height: 460px;
				padding-bottom: 44px;
			}
			.brand .fl{
				padding-right: 15px;
			}
			.brand .fl:nth-child(4){
				padding-right: 0;
			}
			/* 以下是style区 */
			
			.style{
				padding-top: 24px;
				height: 608px;
			}
			.style_l{
				padding-right: 20px;
			}
			.style_l .fl:nth-child(1){
				padding-top: 15px;
			}
			.style_l div:nth-child(2){
				padding-top: 15px;
			}
			.style_r {
				/* 不给宽度图片会上不去 */
				width: 685px;
			}
			.style_r .fl{
				padding: 0 15px 15px 0;
			}
			.style_r .fl:nth-child(3n){
				padding-right: 0px;
			
			}
			
			/* 以下是user区 */
			.title h4{
				color:#FF0000;
			}
			.user{
				padding-top: 17px;
				padding-bottom: 55px;
			}
			
			/* 以下是finanal区 */
			.finanal{
				padding-top: 80px;
				height: 466px;
			}
			.finanal_l{
				padding-right: 15px;
			}
			.finanal_l div:nth-child(2){
				padding-top: 15px;
			}
			.finanal_r{
				width: 724px;
			}
			.finanal_r .fl{
				padding: 0 0 15px 15px;
			}
			.finanal_r div:nth-child(4){
				padding-bottom: 0;
			}
			.finanal_r div:nth-child(5){
				padding-bottom: 0;
			}
			.finanal_r div:nth-child(6){
				padding-bottom: 0;
			}
		</style>
		
	</head>
	<body>
		<div class="w header"><img src="img/C-_Users_lenovo_Desktop_切片_03.gif" alt=""></div>
		<div class="w ad1"><img src="img/C-_Users_lenovo_Desktop_切片_06.gif" alt=""> </div>
		<div class="w ad2"><img src="img/C-_Users_lenovo_Desktop_切片_08.gif" alt=""></div>
		<!-- 以下是banner区 -->
		<div class="w banner">
			<div class="fl banner_l">
				<div><img src="img/case-01_01_03.gif" alt=""></div>
			   <div class="banner_ad">
			   <div class="fl"><img src="img/case001_03.gif" alt=""></div>
			   <div class="fl"><img src="img/case001_05.gif" alt=""></div>
			   <div class="fl"><img src="img/case001_07.gif" alt=""></div>
			    </div>
			</div>
			   <div class="fr banner_r"><img src="img/case-01_01_05.gif" alt=""></div>
		</div>
			<!-- 以下是mian区 -->
			<div class="w main">
			    <div class="title"><h3>品牌</h3></div>
			
			    <div class="brand">
			        <div class="fl"><img src="img/case-02_03.gif" alt=""></div>
			        <div class="fl"><img src="img/case-02_05.gif" alt=""></div>
			        <div class="fl"><img src="img/case-02_07.gif" alt=""></div>
			        <div class="fl"><img src="img/case-02_09.gif" alt=""></div>
			    </div>
			    <div ciass="title"><h3>风格</h3></div>
		       <div class="style">
			      <div class="fl style_l">
			        <div><img src="img/case-03_03.gif" alt=""></div>
			        <div><img src="img/case-03_18.gif" alt=""></div>
			 
			      </div>
			      <div class="fl style_r">
				     <div class="fl"><img src="img/case-03_05.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_07.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_09.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_14.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_15.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_16.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_22.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_23.gif" alt=""></div>
				     <div class="fl"><img src="img/case-03_24.gif" alt=""></div>
			       </div>
			   </div>
			</div>
		<!-- 用户晒单 -->
		<div class="w user">
			<div class="title"><h4>用户晒单</h4></div>
			<div class="fl user">
			<div><img src="img/case-04_03.gif" alt=""></div>
		    </div>
		</div>
		<!-- 以下是finanal区 -->
		<div class="w final">
			<div class="title"><h3>婚庆</h3></div>
			<div class="finanal">
			   <div class="fl finanal_l">
				<div><img src="img/case-04_06.gif" alt=""></div>
				<div><img src="img/case-04_17.gif" alt=""></div>
			   </div>
			   <div class="fl finanal_r">
				<div class="fl"><img src="img/case-04_08.gif" alt=""></div>
				<div class="fl"><img src="img/case-04_10.gif" alt=""></div>
				<div class="fl"><img src="img/case-04_12.gif" alt=""></div>
				<div class="fl"><img src="img/case-04_18.gif" alt=""></div>
				<div class="fl"><img src="img/case-04_19.gif" alt=""></div>
				<div class="fl"><img src="img/case-04_20.gif" alt=""></div>
			   </div>
		    </div>
		</div>
		<div class="w finally">
			<div class="fl"><img src="img/case-05_21.gif" alt=""></div>
		</div>
	</body>
</html>
